<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>一枚前端小菜鸟的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="本网站仅作为自己日常使用，如有侵权请告知删除，联系方式：1563831554@qq.com">
<meta property="og:type" content="website">
<meta property="og:title" content="一枚前端小菜鸟的博客">
<meta property="og:url" content="https://gitee.com/weiyayun1995/weiyayun1995.git/page/2/index.html">
<meta property="og:site_name" content="一枚前端小菜鸟的博客">
<meta property="og:description" content="本网站仅作为自己日常使用，如有侵权请告知删除，联系方式：1563831554@qq.com">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="yywei">
<meta property="article:tag" content="菜鸟,前端,js,react,vue">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="一枚前端小菜鸟的博客" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">一枚前端小菜鸟的博客</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">yywei的遇坑记录</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS 订阅"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="搜索"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://gitee.com/weiyayun1995/weiyayun1995.git"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main">
  
    <article id="post-eslint代码自动格式化配置" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/05/25/eslint%E4%BB%A3%E7%A0%81%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E9%85%8D%E7%BD%AE/" class="article-date">
  <time class="dt-published" datetime="2021-05-25T07:19:58.000Z" itemprop="datePublished">2021-05-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/05/25/eslint%E4%BB%A3%E7%A0%81%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E9%85%8D%E7%BD%AE/">eslint代码自动格式化配置</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h5 id="可以自动去除对象最后一个属性的逗号，自动缩进四位，自动闭合标签，也可以自定义配置相关功能"><a href="#可以自动去除对象最后一个属性的逗号，自动缩进四位，自动闭合标签，也可以自定义配置相关功能" class="headerlink" title="可以自动去除对象最后一个属性的逗号，自动缩进四位，自动闭合标签，也可以自定义配置相关功能"></a>可以自动去除对象最后一个属性的逗号，自动缩进四位，自动闭合标签，也可以自定义配置相关功能</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br><span class="line">533</span><br><span class="line">534</span><br><span class="line">535</span><br><span class="line">536</span><br><span class="line">537</span><br><span class="line">538</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line"></span><br><span class="line">    root: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">    parserOptions: &#123;</span><br><span class="line"></span><br><span class="line">        parser: <span class="string">&#x27;babel-eslint&#x27;</span>,</span><br><span class="line"></span><br><span class="line">        sourceType: <span class="string">&#x27;module&#x27;</span>,</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    env: &#123;</span><br><span class="line"></span><br><span class="line">        browser: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">        node: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">        es6: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="keyword">extends</span>: [<span class="string">&#x27;plugin:vue/recommended&#x27;</span>, <span class="string">&#x27;eslint:recommended&#x27;</span>],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    rules: &#123;</span><br><span class="line"></span><br><span class="line">        <span class="string">&quot;vue/html-indent&quot;</span>: [<span class="string">&quot;error&quot;</span>, <span class="number">4</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&quot;indent&quot;</span>: [<span class="string">&quot;error&quot;</span>, <span class="number">4</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;vue/max-attributes-per-line&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                singleline: <span class="number">10</span>,</span><br><span class="line"></span><br><span class="line">                multiline: &#123;</span><br><span class="line"></span><br><span class="line">                    max: <span class="number">1</span>,</span><br><span class="line"></span><br><span class="line">                    allowFirstLine: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">                &#125;,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;vue/singleline-html-element-content-newline&#x27;</span>: <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;vue/multiline-html-element-content-newline&#x27;</span>: <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;vue/name-property-casing&#x27;</span>: [<span class="string">&#x27;error&#x27;</span>, <span class="string">&#x27;PascalCase&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;vue/no-v-html&#x27;</span>: <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;accessor-pairs&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;arrow-spacing&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                before: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">                after: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;block-spacing&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;always&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;brace-style&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            <span class="string">&#x27;1tbs&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                allowSingleLine: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        camelcase: [</span><br><span class="line"></span><br><span class="line">            <span class="number">0</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                properties: <span class="string">&#x27;always&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&quot;comma-dangle&quot;</span>: [<span class="string">&quot;error&quot;</span>, <span class="string">&quot;never&quot;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;comma-spacing&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                before: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">                after: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;comma-style&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;last&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;constructor-super&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        curly: [<span class="number">2</span>, <span class="string">&#x27;multi-line&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;dot-location&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;property&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;eol-last&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        eqeqeq: [<span class="string">&#x27;error&#x27;</span>, <span class="string">&#x27;always&#x27;</span>, &#123;</span><br><span class="line">            <span class="literal">null</span>: <span class="string">&#x27;ignore&#x27;</span></span><br><span class="line">        &#125;],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;generator-star-spacing&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                before: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">                after: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;handle-callback-err&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;^(err|error)$&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;jsx-quotes&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;prefer-single&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;key-spacing&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                beforeColon: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">                afterColon: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;keyword-spacing&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                before: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">                after: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;new-cap&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                newIsCap: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">                capIsNew: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;new-parens&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-array-constructor&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-caller&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-console&#x27;</span>: <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-class-assign&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-cond-assign&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-const-assign&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-control-regex&#x27;</span>: <span class="number">0</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-delete-var&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-dupe-args&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-dupe-class-members&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-dupe-keys&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-duplicate-case&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-empty-character-class&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-empty-pattern&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-eval&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-ex-assign&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-extend-native&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-extra-bind&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-extra-boolean-cast&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-extra-parens&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;functions&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-fallthrough&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-floating-decimal&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-func-assign&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-implied-eval&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-inner-declarations&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;functions&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-invalid-regexp&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-irregular-whitespace&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-iterator&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-label-var&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-labels&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                allowLoop: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">                allowSwitch: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-lone-blocks&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-mixed-spaces-and-tabs&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-multi-spaces&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-multi-str&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-multiple-empty-lines&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                max: <span class="number">1</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-native-reassign&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-negated-in-lhs&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-new-object&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-new-require&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-new-symbol&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-new-wrappers&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-obj-calls&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-octal&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-octal-escape&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-path-concat&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-proto&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-redeclare&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-regex-spaces&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-return-assign&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;except-parens&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-self-assign&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-self-compare&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-sequences&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-shadow-restricted-names&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-spaced-func&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-sparse-arrays&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-this-before-super&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-throw-literal&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-trailing-spaces&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-undef&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-undef-init&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-unexpected-multiline&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-unmodified-loop-condition&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-unneeded-ternary&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                defaultAssignment: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-unreachable&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-unsafe-finally&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-unused-vars&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                vars: <span class="string">&#x27;all&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                args: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-useless-call&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-useless-computed-key&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-useless-constructor&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-useless-escape&#x27;</span>: <span class="number">0</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-whitespace-before-property&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-with&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;one-var&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                initialized: <span class="string">&#x27;never&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;operator-linebreak&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            <span class="string">&#x27;after&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                overrides: &#123;</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;?&#x27;</span>: <span class="string">&#x27;before&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;:&#x27;</span>: <span class="string">&#x27;before&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                &#125;,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;padded-blocks&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        quotes: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            <span class="string">&#x27;single&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                avoidEscape: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">                allowTemplateLiterals: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        semi: [<span class="number">2</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;semi-spacing&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                before: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">                after: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;space-before-blocks&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;always&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;space-before-function-paren&#x27;</span>: [<span class="number">0</span>, <span class="string">&#x27;always&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;space-in-parens&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;space-infix-ops&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;space-unary-ops&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                words: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">                nonwords: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;spaced-comment&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            <span class="string">&#x27;always&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                markers: [</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;global&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;globals&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;eslint&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;eslint-disable&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;*package&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;!&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                    <span class="string">&#x27;,&#x27;</span>,</span><br><span class="line"></span><br><span class="line">                ],</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;template-curly-spacing&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;use-isnan&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;valid-typeof&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;wrap-iife&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;any&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;yield-star-spacing&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;both&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        yoda: [<span class="number">2</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;prefer-const&#x27;</span>: <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;no-debugger&#x27;</span>: process.env.NODE_ENV === <span class="string">&#x27;production&#x27;</span> ? <span class="number">2</span> : <span class="number">0</span>,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;object-curly-spacing&#x27;</span>: [</span><br><span class="line"></span><br><span class="line">            <span class="number">2</span>,</span><br><span class="line"></span><br><span class="line">            <span class="string">&#x27;always&#x27;</span>,</span><br><span class="line"></span><br><span class="line">            &#123;</span><br><span class="line"></span><br><span class="line">                objectsInObjects: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;array-bracket-spacing&#x27;</span>: [<span class="number">2</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/05/25/eslint%E4%BB%A3%E7%A0%81%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E9%85%8D%E7%BD%AE/" data-id="ckq7mlsv50004dgt9hkikd65d" data-title="eslint代码自动格式化配置" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-number数字输入框封装" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/05/21/number%E6%95%B0%E5%AD%97%E8%BE%93%E5%85%A5%E6%A1%86%E5%B0%81%E8%A3%85/" class="article-date">
  <time class="dt-published" datetime="2021-05-21T08:34:52.000Z" itemprop="datePublished">2021-05-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/05/21/number%E6%95%B0%E5%AD%97%E8%BE%93%E5%85%A5%E6%A1%86%E5%B0%81%E8%A3%85/">number数字输入框封装</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    <span class="comment">// $attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定</span></span><br><span class="line">        &lt;el-input :type=<span class="string">&quot;type&quot;</span> :rows=<span class="string">&quot;rows&quot;</span> v-bind=<span class="string">&quot;$attrs&quot;</span> @input=<span class="string">&quot;handleChange&quot;</span> /&gt;</span><br><span class="line">        &lt;span&gt;&#123;&#123; label &#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    props: &#123;</span><br><span class="line">        type: &#123;</span><br><span class="line">            type: <span class="built_in">String</span>,</span><br><span class="line">            <span class="keyword">default</span>: <span class="string">&#x27;text&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        rows: &#123;</span><br><span class="line">            type: <span class="built_in">String</span>,</span><br><span class="line">            <span class="keyword">default</span>: <span class="string">&#x27;2&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        label: &#123;</span><br><span class="line">            type: <span class="built_in">String</span>,</span><br><span class="line">            <span class="keyword">default</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        <span class="function"><span class="title">handleChange</span>(<span class="params">val</span>)</span> &#123;</span><br><span class="line">            <span class="built_in">this</span>.$emit(<span class="string">&#x27;input&#x27;</span>, val)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style lang=<span class="string">&quot;less&quot;</span> scoped&gt;</span><br><span class="line">.el-textarea &#123;</span><br><span class="line">    width: <span class="number">50</span>%;</span><br><span class="line">&#125;</span><br><span class="line">.el-input &#123;</span><br><span class="line">    width: <span class="number">25</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/05/21/number%E6%95%B0%E5%AD%97%E8%BE%93%E5%85%A5%E6%A1%86%E5%B0%81%E8%A3%85/" data-id="ckq7mlsvc000cdgt95ohm6rp9" data-title="number数字输入框封装" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-vuex中使用modules用法" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/05/18/vuex%E4%B8%AD%E4%BD%BF%E7%94%A8modules%E7%94%A8%E6%B3%95/" class="article-date">
  <time class="dt-published" datetime="2021-05-18T03:32:06.000Z" itemprop="datePublished">2021-05-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/05/18/vuex%E4%B8%AD%E4%BD%BF%E7%94%A8modules%E7%94%A8%E6%B3%95/">vuex中使用modules用法</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h4 id="构建vuex"><a href="#构建vuex" class="headerlink" title="构建vuex"></a>构建vuex</h4><p>创建整体目录结构</p>
<p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210518170633127.png" alt="image-20210518170633127"></p>
<p>modules目录结构</p>
<p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210518171013783.png" alt="image-20210518171013783"></p>
<p>modules子文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .....src/store/modules/addNum.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">    num: <span class="string">&#x27;&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 执行state发生改变</span></span><br><span class="line"><span class="keyword">const</span> mutations = &#123;</span><br><span class="line">    ADDNUM: <span class="function">(<span class="params">state, num</span>) =&gt;</span> &#123;</span><br><span class="line">        state.num = num</span><br><span class="line">    &#125;,</span><br><span class="line">    DELNUM: <span class="function">(<span class="params">state, num</span>) =&gt;</span> &#123;</span><br><span class="line">        state.num = num - <span class="number">1</span> </span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 触发state改变的唯一途径</span></span><br><span class="line"><span class="keyword">const</span> actions = &#123;</span><br><span class="line">    <span class="function"><span class="title">addNum</span>(<span class="params">&#123;commit&#125;, num=<span class="number">0</span></span>)</span> &#123;</span><br><span class="line">        <span class="comment">// 通过commit触发mutations</span></span><br><span class="line">        commit(<span class="string">&#x27;ADDNUM&#x27;</span>, num)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">delNum</span>(<span class="params">&#123;commit&#125;, num</span>)</span> &#123;</span><br><span class="line">        commit(<span class="string">&#x27;DELNUM&#x27;</span>, num)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// namespaced:true必填</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    namespaced: <span class="literal">true</span>,</span><br><span class="line">    state,</span><br><span class="line">    mutations,</span><br><span class="line">    actions</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>modules中index.js文件，用来汇总子文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .....src/store/modules/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 此index.js文件的主要作用是将store中需要传入的modules参数统一管理</span></span><br><span class="line"><span class="keyword">import</span> addNum <span class="keyword">from</span> <span class="string">&#x27;./addNum&#x27;</span></span><br><span class="line">.....</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    addNum</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>store中的getters.js文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ..... src/store/getters</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// getters文件的主要作用，是将modules中各个文件中的state提取出来，再通过mapGetters引入到各个组件中，方便组件直接使用</span></span><br><span class="line"><span class="keyword">const</span> getters = &#123;</span><br><span class="line">    <span class="comment">// state指的是modules中传入的文件</span></span><br><span class="line">    num: <span class="function"><span class="params">state</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(state, <span class="string">&#x27;state&#x27;</span>) </span><br><span class="line">        <span class="keyword">return</span> state.addNum.num</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> getters</span><br></pre></td></tr></table></figure>

<p>store中的主文件index.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ..... src/store/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建store全局作用仓库</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="keyword">import</span> modules <span class="keyword">from</span> <span class="string">&#x27;./modules&#x27;</span></span><br><span class="line"><span class="keyword">import</span> getters <span class="keyword">from</span> <span class="string">&#x27;./getters&#x27;</span></span><br><span class="line"><span class="comment">// Vuex作为插件 挂载到Vue实例上</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    modules, <span class="comment">//es6的写法，modules:modules</span></span><br><span class="line">    getters</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br></pre></td></tr></table></figure>

<p>将store注入main.js中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  store,</span><br><span class="line">  template: <span class="string">&#x27;&lt;App/&gt;&#x27;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h4 id="如何使用vuex"><a href="#如何使用vuex" class="headerlink" title="如何使用vuex"></a>如何使用vuex</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 其中第一个addNum表示的是在modules的index.js文件中export的对象，第二个addNum表示对象中的方法(对应action)，参数表示的是将要传入到action文件中的值</span></span><br><span class="line"><span class="built_in">this</span>.$store.dispatch(<span class="string">&#x27;addNum/addNum&#x27;</span>,参数)</span><br><span class="line"></span><br><span class="line"><span class="comment">//mapGetters的用法</span></span><br><span class="line"><span class="keyword">import</span> &#123;mapGetters&#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// num表示在getters文件中所定义相关state中的值</span></span><br><span class="line"><span class="comment">// mapGetters中传入的是数组，数组中的值可以直接使用，无需关心其变化vuex中的值发生改变其会做出相应的改变</span></span><br><span class="line">computed:&#123;</span><br><span class="line">    ...mapGetters([<span class="string">&#x27;num&#x27;</span>]),</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 查看store中相关的数据</span></span><br><span class="line"><span class="built_in">this</span>.$store.state</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/05/18/vuex%E4%B8%AD%E4%BD%BF%E7%94%A8modules%E7%94%A8%E6%B3%95/" data-id="ckq7mlsve000edgt9g1j40z0b" data-title="vuex中使用modules用法" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-axios二次封装" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/05/18/axios%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85/" class="article-date">
  <time class="dt-published" datetime="2021-05-18T03:14:01.000Z" itemprop="datePublished">2021-05-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/05/18/axios%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85/">axios二次封装</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h4 id="request-js文件"><a href="#request-js文件" class="headerlink" title="request.js文件"></a>request.js文件</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;Message, Loading&#125; <span class="keyword">from</span> <span class="string">&#x27;element-ui&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;stringify&#125; <span class="keyword">from</span> <span class="string">&#x27;qs&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;getToken, removeToken&#125; <span class="keyword">from</span> <span class="string">&#x27;@/utils/auth&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// create an axios instance</span></span><br><span class="line"><span class="keyword">const</span> service = axios.create(&#123;</span><br><span class="line">    baseURL: process.env.VUE_APP_BASE_API, <span class="comment">// url = base url + request url</span></span><br><span class="line">    timeout: <span class="number">60000</span> <span class="comment">// 响应延迟</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> token = <span class="literal">true</span>  <span class="comment">//设置默认的token  具体项目的token需要项目中配置</span></span><br><span class="line"><span class="keyword">let</span> loading; <span class="comment">// 加载对象</span></span><br><span class="line"><span class="keyword">let</span> time = <span class="literal">null</span>; <span class="comment">// 定时器</span></span><br><span class="line"><span class="keyword">const</span> need_min_loading_time = <span class="number">200</span>; <span class="comment">// 为了控制加载过快loading闪动的问题</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showLoading</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!time) &#123;</span><br><span class="line">        time = <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            loading = Loading.service(&#123;</span><br><span class="line">                lock: <span class="literal">true</span>,</span><br><span class="line">                background: <span class="string">&#x27;rgba(0, 0, 0, 0)&#x27;</span></span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;, need_min_loading_time);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">closeLoading</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    time &amp;&amp; <span class="built_in">clearTimeout</span>(time);</span><br><span class="line">    time = <span class="literal">null</span>;</span><br><span class="line">    loading &amp;&amp; loading.close();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// request interceptor</span></span><br><span class="line">service.interceptors.request.use(</span><br><span class="line">    config =&gt; &#123;</span><br><span class="line">        config.headers[<span class="string">&#x27;Content-Type&#x27;</span>] = <span class="string">&#x27;application/x-www-form-urlencoded; charset=utf-8&#x27;</span>;</span><br><span class="line">        <span class="keyword">if</span> (token) &#123; <span class="comment">//token是否存在</span></span><br><span class="line">            config.headers[<span class="string">&#x27;Authorization&#x27;</span>] = getToken();</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">const</span> isLoading = config.loading !== <span class="literal">undefined</span> ? config.loading : <span class="literal">true</span>;</span><br><span class="line">        <span class="keyword">if</span> (isLoading) &#123;</span><br><span class="line">            showLoading();</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (config.requestType !== <span class="string">&#x27;uploadFile&#x27;</span>) &#123;</span><br><span class="line">            config.data = stringify(config.data);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> config;</span><br><span class="line">    &#125;,</span><br><span class="line">    error =&gt; &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(error); <span class="comment">// for debug</span></span><br><span class="line">        closeLoading();</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// response interceptor</span></span><br><span class="line">service.interceptors.response.use(</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * If you want to get http information such as headers or status</span></span><br><span class="line"><span class="comment">     * Please return  response =&gt; response</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * Determine the request status by custom status</span></span><br><span class="line"><span class="comment">     * Here is just an example</span></span><br><span class="line"><span class="comment">     * You can also judge the status by HTTP Status status</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    response =&gt; &#123;</span><br><span class="line">        closeLoading();</span><br><span class="line">        <span class="keyword">const</span> isBlob = response.data <span class="keyword">instanceof</span> Blob;</span><br><span class="line">        <span class="keyword">const</span> res = response.data;</span><br><span class="line">        <span class="comment">// if the custom code is not 20000, it is judged as an error.</span></span><br><span class="line">        <span class="keyword">if</span> (res.code !== <span class="number">200</span> &amp;&amp; !isBlob) &#123;</span><br><span class="line">            Message(&#123;</span><br><span class="line">                message: res.msg || <span class="string">&#x27;Error&#x27;</span>,</span><br><span class="line">                type: <span class="string">&#x27;error&#x27;</span>,</span><br><span class="line">                duration: <span class="number">5</span> * <span class="number">1000</span></span><br><span class="line">            &#125;);</span><br><span class="line">            <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="keyword">new</span> <span class="built_in">Error</span>(res.message || <span class="string">&#x27;Error&#x27;</span>));</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> res;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    error =&gt; &#123;</span><br><span class="line">        closeLoading();</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;err&#x27;</span> + error); <span class="comment">// for debug</span></span><br><span class="line">        <span class="keyword">if</span> (error.response.status === <span class="number">401</span>) &#123;</span><br><span class="line">            <span class="comment">// 删除重置token</span></span><br><span class="line">            removeToken()</span><br><span class="line">        &#125;</span><br><span class="line">        Message(&#123;</span><br><span class="line">            message: error.response.data.message || <span class="string">&#x27;系统异常&#x27;</span>,</span><br><span class="line">            type: <span class="string">&#x27;error&#x27;</span>,</span><br><span class="line">            duration: <span class="number">5</span> * <span class="number">1000</span></span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> service;</span><br></pre></td></tr></table></figure>



<h4 id="auth-js文件"><a href="#auth-js文件" class="headerlink" title="auth.js文件"></a>auth.js文件</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Cookies <span class="keyword">from</span> <span class="string">&#x27;js-cookie&#x27;</span>; <span class="comment">// cookies操作插件</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> TokenKey = <span class="string">&#x27;token&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">getToken</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> Cookies.get(TokenKey);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">setToken</span>(<span class="params">token</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> Cookies.set(TokenKey, token);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">removeToken</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> Cookies.remove(TokenKey);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/05/18/axios%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85/" data-id="ckq7mlsv00001dgt950ic3v9a" data-title="axios二次封装" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-图片预览插件viewerjs" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/04/14/%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%E6%8F%92%E4%BB%B6viewerjs/" class="article-date">
  <time class="dt-published" datetime="2021-04-14T10:55:57.000Z" itemprop="datePublished">2021-04-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/04/14/%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%E6%8F%92%E4%BB%B6viewerjs/">图片预览插件viewerjs</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <ol>
<li><p>在vue中使用</p>
<p>**npm安装 : **</p>
<p>npm install viewerjs</p>
<p><strong>配置参数</strong></p>
<p>class = “check-pic” 类名 用于后续实例化使用</p>
<p>:src 图片地址</p>
<p>:data-original 图片根地址</p>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;img</span><br><span class="line"><span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;check-pic&quot;</span></span><br><span class="line">:src=<span class="string">&quot;item.pic_path&quot;</span></span><br><span class="line">:data-original=<span class="string">&quot;item.pic_path&quot;</span></span><br><span class="line">&gt;</span><br></pre></td></tr></table></figure>

<p>​    <strong>实例化：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> imgList = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;.check-pic&#x27;</span>)</span><br><span class="line"><span class="keyword">new</span> Viewer(imgItem, &#123;</span><br><span class="line">    inline: <span class="literal">true</span>,</span><br><span class="line">    url: <span class="string">&#x27;data-original&#x27;</span>,</span><br><span class="line">    zoomRatio: <span class="number">0.6</span>,</span><br><span class="line">    ...option</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/04/14/%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%E6%8F%92%E4%BB%B6viewerjs/" data-id="ckq7mlsvh000hdgt91vq0ai3b" data-title="图片预览插件viewerjs" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-本地图片压缩（方案一）" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/04/13/%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%EF%BC%88%E6%96%B9%E6%A1%88%E4%B8%80%EF%BC%89/" class="article-date">
  <time class="dt-published" datetime="2021-04-13T03:13:02.000Z" itemprop="datePublished">2021-04-13</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/04/13/%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%EF%BC%88%E6%96%B9%E6%A1%88%E4%B8%80%EF%BC%89/">本地图片压缩（方案一）</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="本地图片压缩"><a href="#本地图片压缩" class="headerlink" title="本地图片压缩"></a>本地图片压缩</h2><h3 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h3><p>该方法试用于任何文件上传处理的地方。</p>
<h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><p>采用 <code>canvas.toBlob</code>api实现了图片压缩功能。</p>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>从图片的尺寸以及分辨率双层面进行压缩处理。</p>
<h3 id="方法参数"><a href="#方法参数" class="headerlink" title="方法参数"></a>方法参数</h3><table>
<thead>
<tr>
<th>参数名</th>
<th>参数类型</th>
<th>参数含义</th>
<th>参数默认值</th>
</tr>
</thead>
<tbody><tr>
<td>file</td>
<td>Object</td>
<td>文件对象</td>
<td>无</td>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>图片类型</td>
<td>image/jpeg(or image/webp or image/png)</td>
</tr>
<tr>
<td>_maxWidth</td>
<td>Number</td>
<td>图片最大宽</td>
<td>700</td>
</tr>
<tr>
<td>_maxHeight</td>
<td>Number</td>
<td>图片最大高</td>
<td>700</td>
</tr>
<tr>
<td>quality</td>
<td>Number</td>
<td>图片质量</td>
<td>0.92 (0-1)</td>
</tr>
</tbody></table>
<p>注意：当指定<code>type</code>为<code>image/png</code>类型时，不支持分辨率压缩，只有为<code>image/jpeg</code>、<code>image/webp</code>才能分辨率压缩</p>
<h3 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h3><p>下面是示例代码，适当的时候可以根据实际的需求<code>ctrl+c/v</code>取舍。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return </span>Promise 压缩图片</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>file 文件对象</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;String&#125;</span> </span>type 图片类型 默认：image/jpeg...</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Number&#125;</span> </span>_maxWidth 图片最大宽  默认 700</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Number&#125;</span> </span>_maxHeight 图片最大高  默认 700</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Number&#125;</span> </span>Number 图片质量 0-1</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">zipPic</span>(<span class="params">file = [], type = <span class="string">&#x27;image/jpeg&#x27;</span>, _maxWidth = <span class="number">700</span>, _maxHeight = <span class="number">700</span>, quality = <span class="number">0.92</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (file.length === <span class="number">0</span> || <span class="keyword">typeof</span> type !== <span class="string">&#x27;string&#x27;</span> || <span class="keyword">typeof</span> _maxWidth !== <span class="string">&#x27;number&#x27;</span> || <span class="keyword">typeof</span> _maxHeight !== <span class="string">&#x27;number&#x27;</span> || <span class="keyword">typeof</span> quality !== <span class="string">&#x27;number&#x27;</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> reject(<span class="literal">true</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 压缩图片需要的一些元素和对象</span></span><br><span class="line">        <span class="keyword">let</span> reader = <span class="keyword">new</span> FileReader();</span><br><span class="line">        <span class="keyword">let</span> img = <span class="keyword">new</span> Image();</span><br><span class="line">        reader.readAsDataURL(file);</span><br><span class="line">        <span class="comment">// 文件base64化，以便获知图片原始尺寸</span></span><br><span class="line">        reader.onload = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">            img.src = e.target.result;</span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="comment">// base64地址图片加载完毕后执行</span></span><br><span class="line">        img.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// 缩放图片需要的canvas</span></span><br><span class="line">            <span class="keyword">let</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">&#x27;canvas&#x27;</span>);</span><br><span class="line">            <span class="keyword">let</span> context = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>);</span><br><span class="line">            <span class="comment">// 图片原始尺寸</span></span><br><span class="line">            <span class="keyword">let</span> originWidth = img.width;</span><br><span class="line">            <span class="keyword">let</span> originHeight = img.height;</span><br><span class="line">            <span class="comment">// 最大尺寸限制，可通过设置宽高来实现图片压缩程度</span></span><br><span class="line">            <span class="keyword">let</span> maxWidth = _maxWidth,</span><br><span class="line">                maxHeight = _maxHeight;</span><br><span class="line">            <span class="comment">// 目标尺寸</span></span><br><span class="line">            <span class="keyword">let</span> targetWidth = originWidth,</span><br><span class="line">                targetHeight = originHeight;</span><br><span class="line">            <span class="comment">// 图片尺寸超过600x600的限制</span></span><br><span class="line">            <span class="keyword">if</span> (originWidth &gt; maxWidth || originHeight &gt; maxHeight) &#123;</span><br><span class="line">                <span class="keyword">if</span> (originWidth / originHeight &gt; maxWidth / maxHeight) &#123;</span><br><span class="line">                    <span class="comment">// 更宽，按照宽度限定尺寸</span></span><br><span class="line">                    targetWidth = maxWidth;</span><br><span class="line">                    targetHeight = <span class="built_in">Math</span>.round(maxWidth * (originHeight / originWidth));</span><br><span class="line">                &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                    <span class="comment">// 更高，按照高度限定尺寸</span></span><br><span class="line">                    targetHeight = maxHeight;</span><br><span class="line">                    targetWidth = <span class="built_in">Math</span>.round(maxHeight * (originWidth / originHeight));</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">// canvas对图片进行缩放</span></span><br><span class="line">            canvas.width = targetWidth;</span><br><span class="line">            canvas.height = targetHeight;</span><br><span class="line">            <span class="comment">// 清除画布</span></span><br><span class="line">            context.clearRect(<span class="number">0</span>, <span class="number">0</span>, targetWidth, targetHeight);</span><br><span class="line">            <span class="comment">// 图片压缩</span></span><br><span class="line">            context.drawImage(img, <span class="number">0</span>, <span class="number">0</span>, targetWidth, targetHeight);</span><br><span class="line">            <span class="comment">// 异步方法 Bolb对象</span></span><br><span class="line">            canvas.toBlob(</span><br><span class="line">                blob =&gt; &#123;</span><br><span class="line">                    <span class="comment">// 重新转为 正常的 File 对象 让 antd Upload 接收</span></span><br><span class="line">                    <span class="keyword">let</span> newFile = <span class="keyword">new</span> File([blob], file.name, &#123; <span class="attr">type</span>: file.type &#125;);</span><br><span class="line">                    newFile.uid = file.uid;</span><br><span class="line">                    resolve(newFile);</span><br><span class="line">                &#125;,</span><br><span class="line">                type,</span><br><span class="line">                quality <span class="comment">// 图片质量</span></span><br><span class="line">            );</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/04/13/%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%EF%BC%88%E6%96%B9%E6%A1%88%E4%B8%80%EF%BC%89/" data-id="ckq7mlsvk000ldgt9ezm960vx" data-title="本地图片压缩（方案一）" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-本地图片压缩（方案二）" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/04/13/%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%EF%BC%88%E6%96%B9%E6%A1%88%E4%BA%8C%EF%BC%89/" class="article-date">
  <time class="dt-published" datetime="2021-04-13T03:08:38.000Z" itemprop="datePublished">2021-04-13</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/04/13/%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%EF%BC%88%E6%96%B9%E6%A1%88%E4%BA%8C%EF%BC%89/">图片压缩方案</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h2><ul>
<li>上传图片压缩</li>
<li>图片大小在 <code>500K</code> 内，且对清晰度有要求</li>
</ul>
<h2 id="方案说明"><a href="#方案说明" class="headerlink" title="方案说明"></a>方案说明</h2><p>将上传的图片压缩到 <code>500K</code> 内，尽可能的保证画质，但很难保证所有图片均不会模糊。前端可以采用 <code>canvas</code> 进行图片压缩，保证图片大小符合要求，且画质尚可，基于 <a target="_blank" rel="noopener" href="https://fe.che300.com/easymock/wikiCatalog/5e60c89ebeb7177e5515e423">本地图片压缩@育仪</a> 的方式做部分修改后得到两种方案。主体都是针对 <code>quality</code> 进行递减，直到压缩后的图片符合要求的 <code>maxSize</code> 为止。</p>
<ol>
<li>不修改原图片宽高，仅修改图片质量：采用逐步减小 <code>quality</code>，直到大小符合要求为止，实测压缩后图片清晰，但是缺点一个较大的图片压缩的次数过多，等待时间较长。</li>
<li>修改图片原始最大宽高，同时修改图片 <code>quality</code>，逐步递减直到大小符合条件，但是清晰度尚可，会有少数特殊图片稍微模糊。</li>
</ol>
<h3 id="循环压缩"><a href="#循环压缩" class="headerlink" title="循环压缩"></a>循环压缩</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@returns <span class="type">&#123;file&#125;</span> </span>压缩后的文件对象</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;*&#125;</span> </span>file 文件对象</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;*&#125;</span> </span>maxSize 图片大小限制</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">whileResize</span>(<span class="params">file, maxSize</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> quality = <span class="number">0.98</span>;</span><br><span class="line">    <span class="keyword">let</span> resizeFile = file;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 修改图片 quality 直到符合位置</span></span><br><span class="line">    <span class="keyword">while</span> (resizeFile.size &gt; maxSize &amp;&amp; quality &gt; <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="comment">// 保存压缩后的文件对象</span></span><br><span class="line">        resizeFile = <span class="keyword">await</span> resizeImage(&#123;file, quality&#125;);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 判断目前差值，quality 递减值(为了避免单次减太多图片模糊)</span></span><br><span class="line">        <span class="keyword">if</span> (resizeFile.size - maxSize &gt; <span class="number">300000</span>) &#123;</span><br><span class="line">            quality = (quality - <span class="number">0.1</span>).toFixed(<span class="number">2</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            quality = (quality - <span class="number">0.05</span>).toFixed(<span class="number">2</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> resizeFile;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="使用说明"><a href="#使用说明" class="headerlink" title="使用说明"></a>使用说明</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 若压缩的时间较长，可做 loading 标识</span></span><br><span class="line"><span class="built_in">this</span>.loading = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">const</span> resizeFile = <span class="keyword">await</span> whileResize(file, maxSize);</span><br><span class="line"><span class="built_in">this</span>.loading = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>

<h3 id="参数说明"><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h3><table>
<thead>
<tr>
<th align="center">参数</th>
<th align="center">类型</th>
<th>说明</th>
<th>默认值</th>
</tr>
</thead>
<tbody><tr>
<td align="center">file</td>
<td align="center">Object</td>
<td>文件对象</td>
<td>–</td>
</tr>
<tr>
<td align="center">quality</td>
<td align="center">Number</td>
<td>图片质量</td>
<td>0.92</td>
</tr>
<tr>
<td align="center">limitSize</td>
<td align="center">Object</td>
<td>图片尺寸显示</td>
<td><code>undefied</code> 默认不修改图片尺寸，可传参数 <code>&#123; width: 1600, height 1600 &#125;</code></td>
</tr>
<tr>
<td align="center">type</td>
<td align="center">String</td>
<td>图片类型</td>
<td><code>image/jpeg</code></td>
</tr>
</tbody></table>
<h3 id="压缩代码展示"><a href="#压缩代码展示" class="headerlink" title="压缩代码展示"></a>压缩代码展示</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return </span>Promise 压缩图片</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>file 文件对象</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;String&#125;</span> </span>type 图片类型 默认：image/jpeg、image/png...</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">resizeImage</span>(<span class="params">params</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> &#123;</span><br><span class="line">        file,</span><br><span class="line">        quality,</span><br><span class="line">        limitSize,</span><br><span class="line">        type = <span class="string">&#x27;image/jpeg&#x27;</span></span><br><span class="line">    &#125; = params;</span><br><span class="line">    <span class="comment">// 图片质量，数字类型</span></span><br><span class="line">    quality = quality ? <span class="built_in">Number</span>(quality) : <span class="number">0.98</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> reader = <span class="keyword">new</span> FileReader();</span><br><span class="line">        <span class="keyword">let</span> image = <span class="keyword">new</span> Image();</span><br><span class="line"></span><br><span class="line">        reader.readAsDataURL(file);</span><br><span class="line">        <span class="comment">// 文件 base64 化，以便获知图片原始尺寸</span></span><br><span class="line">        reader.onload = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">            image.src = e.target.result;</span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="comment">// base64地址图片加载完毕后执行</span></span><br><span class="line">        image.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// 缩放图片需要的canvas</span></span><br><span class="line">            <span class="keyword">let</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">&#x27;canvas&#x27;</span>);</span><br><span class="line">            <span class="keyword">let</span> context = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>);</span><br><span class="line">            <span class="comment">// 图片目标尺寸</span></span><br><span class="line">            <span class="keyword">let</span> targetWidth = image.width,</span><br><span class="line">                targetHeight = image.height;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">// 判断是否修改图片尺寸的最大限制</span></span><br><span class="line">            <span class="keyword">if</span> (limitSize) &#123;</span><br><span class="line">                <span class="comment">// 图片原始尺寸</span></span><br><span class="line">                <span class="keyword">let</span> originWidth = image.width,</span><br><span class="line">                    originHeight = image.height;</span><br><span class="line">                <span class="comment">// 最大尺寸限制，可通过设置宽高来实现图片压缩程度</span></span><br><span class="line">                <span class="keyword">let</span> maxWidth = limitSize.width || <span class="number">1600</span>,</span><br><span class="line">                    maxHeight = limitSize.height || <span class="number">1600</span>;</span><br><span class="line"></span><br><span class="line">                <span class="comment">// 图片尺寸超过 1600*1600 的限制</span></span><br><span class="line">                <span class="keyword">if</span> (originWidth &gt; maxWidth || originHeight &gt; maxHeight) &#123;</span><br><span class="line">                    <span class="keyword">if</span> (originWidth / originHeight &gt; maxWidth / maxHeight) &#123;</span><br><span class="line">                        <span class="comment">// 更宽，按照宽度限定尺寸</span></span><br><span class="line">                        targetWidth = maxWidth;</span><br><span class="line">                        targetHeight = <span class="built_in">Math</span>.round(maxWidth * (originHeight / originWidth));</span><br><span class="line">                    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                        <span class="comment">// 更高，按照高度限定尺寸</span></span><br><span class="line">                        targetHeight = maxHeight;</span><br><span class="line">                        targetWidth = <span class="built_in">Math</span>.round(maxHeight * (originWidth / originHeight));</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">// canvas对图片进行缩放</span></span><br><span class="line">            canvas.width = targetWidth;</span><br><span class="line">            canvas.height = targetHeight;</span><br><span class="line">            <span class="comment">// 清除画布</span></span><br><span class="line">            context.clearRect(<span class="number">0</span>, <span class="number">0</span>, targetWidth, targetHeight);</span><br><span class="line">            <span class="comment">// 绘制图片</span></span><br><span class="line">            context.drawImage(image, <span class="number">0</span>, <span class="number">0</span>, targetWidth, targetHeight);</span><br><span class="line">            <span class="comment">// 异步方法 Bolb对象</span></span><br><span class="line">            canvas.toBlob(</span><br><span class="line">                blob =&gt; &#123;</span><br><span class="line">                    <span class="comment">// 重新转为 正常的 File 对象 让 antd Upload 接收</span></span><br><span class="line">                    <span class="keyword">let</span> newFile = <span class="keyword">new</span> File([blob], file.name, &#123;<span class="attr">type</span>: file.type&#125;);</span><br><span class="line">                    newFile.uid = file.uid;</span><br><span class="line">                    resolve(newFile);</span><br><span class="line">                &#125;,</span><br><span class="line">                type, <span class="comment">// 图片类型</span></span><br><span class="line">                quality <span class="comment">// 图片质量</span></span><br><span class="line">            );</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h2><ul>
<li>实测 <code>image/png</code> 、 <code>image/jpg</code> 比 <code>image/jpeg</code> 压缩后生成的图片要大一些，选择 <code>type = &#39;image/jpeg&#39;</code></li>
<li>以上两个方案的唯一区别：二比一仅增加了图片最大宽高的限制</li>
</ul>
<h2 id="第三方插件"><a href="#第三方插件" class="headerlink" title="第三方插件"></a>第三方插件</h2><p>若不想自己写压缩的代码，也可以引入第三方库 <a target="_blank" rel="noopener" href="https://github.com/fengyuanchen/compressorjs/blob/master/src/index.js">compressorjs</a>，可传入参数进行压缩，也是使用 <code>canvas</code> 的方式进行的压缩，其内部解决了图片自动旋转(<code>EXIF Orientation</code>)的问题，调用该方法只进行一次压缩，通过回调函数的方式返回压缩后的文件对象。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Compressor <span class="keyword">from</span> <span class="string">&#x27;compressorjs&#x27;</span>;</span><br><span class="line"><span class="keyword">new</span> Compressor(file, &#123;</span><br><span class="line">    quality: <span class="number">0.6</span>,</span><br><span class="line">    <span class="function"><span class="title">success</span>(<span class="params">result</span>)</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> formData = <span class="keyword">new</span> FormData();</span><br><span class="line"></span><br><span class="line">        <span class="comment">// The third parameter is required for server</span></span><br><span class="line">        formData.append(<span class="string">&#x27;file&#x27;</span>, result, result.name);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Send the compressed image file to server with XMLHttpRequest.</span></span><br><span class="line">        axios.post(<span class="string">&#x27;/path/to/upload&#x27;</span>, formData).then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;Upload success&#x27;</span>);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">error</span>(<span class="params">err</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(err.message);</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/04/13/%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%EF%BC%88%E6%96%B9%E6%A1%88%E4%BA%8C%EF%BC%89/" data-id="ckq7mlsvn000mdgt9ekmfb8q8" data-title="图片压缩方案" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-在for循环中调用异步接口-执行异步代码块" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/04/13/%E5%9C%A8for%E5%BE%AA%E7%8E%AF%E4%B8%AD%E8%B0%83%E7%94%A8%E5%BC%82%E6%AD%A5%E6%8E%A5%E5%8F%A3-%E6%89%A7%E8%A1%8C%E5%BC%82%E6%AD%A5%E4%BB%A3%E7%A0%81%E5%9D%97/" class="article-date">
  <time class="dt-published" datetime="2021-04-13T02:57:13.000Z" itemprop="datePublished">2021-04-13</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/04/13/%E5%9C%A8for%E5%BE%AA%E7%8E%AF%E4%B8%AD%E8%B0%83%E7%94%A8%E5%BC%82%E6%AD%A5%E6%8E%A5%E5%8F%A3-%E6%89%A7%E8%A1%8C%E5%BC%82%E6%AD%A5%E4%BB%A3%E7%A0%81%E5%9D%97/">在for循环中调用异步接口/执行异步代码块</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <ol>
<li><p>方法一（async await）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">p</span>(<span class="params"></span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>)=&gt;</span>&#123;</span><br><span class="line">        resolve(<span class="keyword">new</span> <span class="built_in">Date</span>().getTime())</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">aaa</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">let</span> a = <span class="keyword">await</span> p();</span><br><span class="line">        arr.push(a)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">aa</span>(<span class="params"></span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">await</span> aaa();</span><br><span class="line">    <span class="built_in">console</span>.log(arr)</span><br><span class="line">&#125;</span><br><span class="line">aa()</span><br></pre></td></tr></table></figure></li>
<li><p>方法二 （Promise.all）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">p</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">        resolve(<span class="keyword">new</span> <span class="built_in">Date</span>().getTime())</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">let</span> a = p()</span><br><span class="line">    arr.push(a);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> _arr</span><br><span class="line"><span class="built_in">Promise</span>.all(arr).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">    _arr = res</span><br><span class="line">    <span class="built_in">console</span>.log(_arr)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/04/13/%E5%9C%A8for%E5%BE%AA%E7%8E%AF%E4%B8%AD%E8%B0%83%E7%94%A8%E5%BC%82%E6%AD%A5%E6%8E%A5%E5%8F%A3-%E6%89%A7%E8%A1%8C%E5%BC%82%E6%AD%A5%E4%BB%A3%E7%A0%81%E5%9D%97/" data-id="ckq7mlsvi000idgt90j3w6wma" data-title="在for循环中调用异步接口/执行异步代码块" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-常用正则表达式" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/04/13/%E5%B8%B8%E7%94%A8%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/" class="article-date">
  <time class="dt-published" datetime="2021-04-13T02:39:30.000Z" itemprop="datePublished">2021-04-13</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/04/13/%E5%B8%B8%E7%94%A8%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/">常用正则表达式</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <ol>
<li><p>身份证号码 -&gt; 371428199911118888</p>
<p>/^\d{6}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/</p>
</li>
<li><p>图片文件扩展名 -&gt; smile.jpg</p>
<p>/(jpg$)|(jpeg$)|(png$)|(bmp$)|(gif$)/i</p>
</li>
<li><p>车牌号 -&gt; 苏A123456</p>
<p>/^(京|津|沪|渝|冀|豫|云|辽|晋|湘|皖|鲁|鄂|苏|浙|赣|新|桂|甘|黑|蒙|陕|吉|闽|贵|粤|青|藏|川|宁|琼)[A-Za-z][A-Za-z0-9]{5,7}$/</p>
</li>
<li><p>手机号（宽松） -&gt; 19012345678</p>
<p>/^1[3-9]\d{9}$/</p>
</li>
<li><p>电子邮箱 -&gt; <a href="mailto:&#x6d;&#97;&#x69;&#108;&#64;&#x31;&#x36;&#x33;&#46;&#99;&#111;&#109;">&#x6d;&#97;&#x69;&#108;&#64;&#x31;&#x36;&#x33;&#46;&#99;&#111;&#109;</a></p>
<p>/^[a-zA-Z0-9.!#$%&amp;’<em>+/=?^_`{|}~-]+@<a href="?:%5Ba-zA-Z0-9-%5D%7B0,61%7D%5Ba-zA-Z0-9%5D">a-zA-Z0-9</a>?(?:.<a href="?:%5Ba-zA-Z0-9-%5D%7B0,61%7D%5Ba-zA-Z0-9%5D">a-zA-Z0-9</a>?)</em>$/</p>
</li>
<li><p>数字集合</p>
<p>/^([\d+,\d+])(;[\d+,\d+])*$/</p>
</li>
<li><p>护照 -&gt; E90000082</p>
<p>/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/</p>
</li>
<li><p>匹配姓名拼音 ZHANG,SAN</p>
<p>/^[A-Z]+(,[A-Z]+)<em>(,·,[A-Z]+)</em>(,[A-Z]+)*$/</p>
</li>
<li><p>中国邮政编码 -&gt; 210000</p>
<p>/^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/</p>
</li>
<li><p>数字范围，逗号间隔(包含小数) -&gt; 11.11,22.2</p>
<p>/^(-?\d+(.\d{1,6}){0,1}),(-?\d+(.\d{1,6}){0,1})$/</p>
</li>
<li><p>手机号码(严谨)</p>
<p>/^1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/</p>
</li>
<li><p>视频文件扩展名</p>
<p>/(mp4$)|(avi$)|(wmv$)|(rmvb$)/i</p>
</li>
<li><p>doc、ppt、xls 文件扩展名</p>
<p>/(doc$)|(docx$)|(ppt$)|(xls$)|(xlsx$)/i</p>
</li>
<li><p>金额正则表达式（限制最大值及小数点后位数）</p>
</li>
</ol>
<p>在element ui中checkNum()表示@input实时输入触发的函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">checkNum</span>(<span class="params">val</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> pattern = <span class="regexp">/^\d*(\.?\d&#123;0,2&#125;)/g</span></span><br><span class="line">    val = val.match(pattern)[<span class="number">0</span>] || <span class="string">&#x27;&#x27;</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">Number</span>(val) &gt;= <span class="number">9999999.99</span>) &#123;</span><br><span class="line">        <span class="built_in">this</span>.money = <span class="number">9999999.99</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        thismoney = val</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/04/13/%E5%B8%B8%E7%94%A8%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/" data-id="ckq7mlsvj000kdgt9gd362nev" data-title="常用正则表达式" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-hexo搭建本地博客" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/03/17/hexo%E6%90%AD%E5%BB%BA%E6%9C%AC%E5%9C%B0%E5%8D%9A%E5%AE%A2/" class="article-date">
  <time class="dt-published" datetime="2021-03-17T03:22:52.000Z" itemprop="datePublished">2021-03-17</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/03/17/hexo%E6%90%AD%E5%BB%BA%E6%9C%AC%E5%9C%B0%E5%8D%9A%E5%AE%A2/">hexo搭建本地博客</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <p>参考文档：</p>
<p>搭建项目步骤：</p>
<ol>
<li>npm install hexo-cli -g 安装hexo-cli插件</li>
<li>hexo init blog 初始化项目（blog为项目名，可以自定义）</li>
<li>cd blog 切换至blog目录</li>
<li>npm/cnpm install  安装项目依赖</li>
<li>hexo s/server  启动项目</li>
<li>默认访问地址为localhost:4000</li>
</ol>
<p>相关操作命令：</p>
<ol>
<li>hexo new ‘文章名称’  新建文章</li>
<li>hexo d ‘上传文章’</li>
<li>hexo clean &amp;&amp; hexo g &amp;&amp; hexo d ‘执行部署命令，部署到gitee/github，国内用户推荐使用gitee’</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/weiyayun1995/weiyayun1995.git/2021/03/17/hexo%E6%90%AD%E5%BB%BA%E6%9C%AC%E5%9C%B0%E5%8D%9A%E5%AE%A2/" data-id="ckq7mlsv80007dgt9gp754reg" data-title="hexo搭建本地博客" class="article-share-link">分享</a>
      
      
      
    </footer>
  </div>
  
</article>



  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/">&laquo; 上一页</a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/3/">下一页 &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/06/">六月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/05/">五月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/04/">四月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/06/22/js%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%8F%8A%E8%BD%AC%E6%8D%A2/">js数据类型及转换</a>
          </li>
        
          <li>
            <a href="/2021/06/18/react-hook-%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%AE%9E%E8%B7%B5/">react-hook 项目中实践</a>
          </li>
        
          <li>
            <a href="/2021/06/18/%E6%95%B0%E5%AD%97%E7%AD%BE%E5%90%8D/">数字签名</a>
          </li>
        
          <li>
            <a href="/2021/06/18/sendbeacon/">sendbeacon</a>
          </li>
        
          <li>
            <a href="/2021/06/18/js%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%88%A4%E6%96%AD/">js数据类型的判断</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2021 yywei<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/js/jquery-3.4.1.min.js"></script>



  
<script src="/fancybox/jquery.fancybox.min.js"></script>




<script src="/js/script.js"></script>





  </div>
</body>
</html>